<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>emit-从子向父组件传值</title>
</head>
<body>
<!--
  子组件向父组件传值
     1. 分发事件  --  键值对
     2. 触发事件  --- 用键取值
     3. 定义回调  --- 获得子组件的状态/数据，进行相关处理
-->

<div id="app">
  <counter @counter="getCounter"></counter> <!--触发事件：用counter作为键 去couter的实例中找对应的值 -->
    <div>
        counter的值是：{{counter.value}}
    </div>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>

    var counter = {
        template:'<button @click="increment">{{number}}</button>',
        data:function () {//工厂模式
            return {
                number:0
            }
        },methods:{
            increment:function () {
                this.number++;
                /***
                 * 分发事件 ，把 counter和 this.number 以键值对的形式绑定到一起
                 *  存放到当前组件的vue实例中
                 * */
                this.$emit('counter',this.number);
            }
        }
    }

    new Vue({
        el:'#app',
        components:{
            counter
        },data:{
             counter:{
                 value:0
             }
        },methods:{
            getCounter:function (val) {
                this.counter.value=val;
            }
        }
    })

</script>


</html>